<template>
  <transition name="moveR">
    <div class="rankDetail">
      <disc-list @select="selectItem" :singer="singer" :songList="songList"></disc-list>
    </div>
  </transition>
</template>

<script>
import DiscList from 'base/DiscList'
import { GetSongList } from 'api/rank'
import { createSong1 } from 'api/song'
import { mapGetters, mapActions, mapMutations } from 'vuex'
import { ERR_OK } from 'api/config'
import { getSongVkey } from 'api/singer'
export default {
  name: 'rankDetail',
  components: {
    DiscList
  },
  data () {
    return {
      songList: []
    }
  },
  // 获取歌单歌曲详细信息
  activated() {
    this.songList = []
    this._GetSongList(this.singer)
    // 进入页面首先判断singer存在与否，不存在的话就返回上一个页面
    this._Getsinger()
  },
  computed: {
    // 获取vuex中的榜单的id，发请求的时候要用
    ...mapGetters([
      'singer'
    ])
  },
  methods: {
    _Getsinger() {
      if (!this.singer.id) {
        this.$router.back()
      }
    },
    // 点击歌曲播放当前歌曲
    selectItem (item, index) {
      this.selectPlay({
        list: [...this.songList],
        index: index
      })
    },
    _GetSongList(singer) {
      GetSongList(singer.id).then((res) => {
        if (res.code === ERR_OK) {
          this.songList = this._resetSongList(res.songlist)
        }
      })
      // 重新修改vuex传过来的数据，改成列表详细页所要的结构
      var name = this.singer.name
      var id = this.singer.id
      var avatar = this.singer.avatar
      this.setSinger({
        name: name,
        id: id,
        avatar: avatar
      })
    },
    // 把歌单的数据整理成我们需要的
    _resetSongList(list) {
      let ret = []
      let ret1 = []
      list.forEach((item) => {
        ret.push(item.data)
      })
      ret.forEach((item) => {
        getSongVkey(item.songmid).then((res) => {
          let vkey = res.data.items[0].vkey
          let url = `http://dl.stream.qqmusic.qq.com/${res.data.items[0].filename}?vkey=${vkey}&guid=7175649092&uin=0&fromtag=66`
          Object.assign(item, { url })
          if (vkey !== '') {
            var song = createSong1(item)
            ret1.push(song)
          }
        })
      })
      return ret1
    },
    // 一次提交多个mutation供播放器使用
    ...mapActions([
      'selectPlay'
    ]),
    // 修改singer的结构
    ...mapMutations({
      setSinger: 'SET_SINGER'
    })
  }
}
</script>

<style scoped>
  .rankDetail{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: white;
  }
  .moveR-enter-active,  .moveR-leave-active {
    transition: all 0.3s linear;
    transform: translateX(0);
  }
   .moveR-enter,  .moveR-leave {
    transform: translateX(100%);
  }
   .moveR-leave-to{
     transform: translateX(100%);
   }
  .rankDetail >>> .singer {
     display: none;
   }
   .rankDetail >>> .loading {
     height: 9rem;
     line-height: 8rem;
   }
</style>
